<template>
	<view class="findpage">
		<view class="swiperbox">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="https://changban.dianjingkeji.net/img/banner-1-拷贝_1.jpg" mode=""></image>
					</view>
				</swiper-item>
			
			</swiper>
		</view>
		<view class="searhcbox" @click="search">
			<input type="text" placeholder="请输入专家/症状/科室/医院" />
			<view class="searchbtn">
				搜索
			</view>
		</view>
		<view class="box">
			<view class="boxtitle">
				疾病/症状
				<view class="line">
					
				</view>
			</view>
			<view class="itembox" >
				<view class="item" v-for="item in bingzhenglist" :key="item.dictCode" @click="bingzheng(item)">
					{{item.dictValue}}
				</view>

			</view>
		</view>
		<view class="box">
			<view class="boxtitle">
				科室
				<view class="line">
					
				</view>
			</view>
			<view class="itembox">
				<view class="item" v-for="item in keshilist" :key="item.dictCode" @click="keshi(item)">
					{{item.dictValue}}
				</view>
		
				
			</view>
		</view>
		<view class="box">
			<view class="boxtitle">
				找过的医生
				<view class="line">
					
				</view>
			</view>
			<view class="listbox">
				<view class="itemlist" v-for="item in list" :key="item.id" @click="gomore(item.dphone)">
					<view class="infobox">
						<view class="imgbox">
							<image :src="'https://changban.dianjingkeji.net'+item.davatarUrl" mode=""></image>
						</view>
						<view class="info">
							
							<view class="nameline">
								<view class="iconfont icon-dingwei">
									<view >
										{{item.juli}}km
									</view>
								</view>
								<view class="name">
									{{item.dname}}
								</view>
								<view class="keshi">
									{{item.dkeshi}}
								</view>
							</view>
							<view class="hospitalname">
								{{item.orgName}}
							</view>
							<view class="zhichengline">
								<view class="itemzhicheng">
									{{item.dzhicheng}}
								</view>
							</view>
						</view>
					</view>
				<!-- 	<view class="tabline">
			
						<view class="itemtab">
							<view class="iconfont icon-yisheng-02">
								
							</view>
						已绑定
						</view>
					</view> -->
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import {getDictData, getDoctor} from '../../utils/api.js'
	export default {
		data() {
			return {
				keshilist:[],
				bingzhenglist:[],
				list:[]
			}
		},
		onShow() {
		   let a={
			   phone:uni.getStorageSync('phone')
		   }
		   getDoctor(a).then(res=>{
			   console.log(res,'找过的医生')
			   this.list=res.data.data
		   })
			uni.setStorageSync('lon','114.633484')
			 uni.setStorageSync('lat','38.048132')
			let b={
				type:'sys_yishengkeshixinxi'
			}
			getDictData(b).then(res=>{
				
				this.keshilist=res.data.data
			})
			let c={
				type:'sys_yishengzhuzhibingzheng'
			}
			getDictData(c).then(res=>{
				
				this.bingzhenglist=res.data.data
			})
			uni.getFuzzyLocation({
				type: 'wgs84',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					  
					 uni.setStorageSync('lon',res.longitude)
					  uni.setStorageSync('lat',res.latitude)
					
					 qqmapsdk.reverseGeocoder({
					          location: {
					            latitude: res.latitude,
					            longitude: res.longitude
					          },
					          success: (res) => {
					            console.log(res,'这是转换过后的')
					            uni.setStorageSync('address','res')
					          },
					          fail(err) {
					            console.log(err)
					          }
					        })
					
					
				}
			});
		},
		methods: {
			keshi(e){
			
				let ser=e.dictValue
				uni.navigateTo({
					url:'/pagesA/disease/disease?ser='+ser
				})
			},
			search(){
				uni.navigateTo({
					url:'/pagesA/disease/disease'
				})
			},
			gomore(e){
				uni.navigateTo({
					url:'/pagesA/more/more?dphone='+e
				})
			},
			talk(){
				uni.navigateTo({
					url:'/pagesA/AItalk/AItalk'
				})
			},
			bingzheng(e){
					
					let ser=e.dictValue
				uni.navigateTo({
					url:'/pagesA/disease/disease?ser='+ser
				})
			},
		}
	}
</script>

<style lang="less" scoped>
  .findpage{
	  width: 750rpx;
	  box-sizing: border-box;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	.swiper-item{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	  .searhcbox{
		  width: 92%;
		  display: flex;
		  align-items: center;
		  height: 70rpx;
		  line-height: 70rpx;
		  border-radius: 35rpx;
		  margin: auto;
		  border: 1rpx solid #1a4f8a;;
		  input{
			  width: 80%;
			  height: 70rpx;
			  padding: 0 10rpx;
			  
		  }
		  .searchbtn{
			  width: 20%;
			  background-color: white;
            text-align: center;
						  line-height: 70rpx;
						  border-radius: 35rpx;
		  }
	  }
	  .box{
		 width: 100;
		  background-color: white;
		  box-sizing: border-box;
		  padding: 30rpx 20rpx;
		  .boxtitle{
			  font-weight: bold;
			  .line{
				  width: 64rpx;
				  height: 8rpx;
				  border-radius: 4rpx;
				  background-color: #1a4f8a ;
			  }
		  }
		  .itembox{
			min-width: 100%;
			min-height: 160rpx;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			.item{
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				margin: 10rpx 20rpx;
				text-align: center;
				background-color: #f4f9ff ;
				font-weight: bold;
				color: #585858 ;
			}
		  }
		  .listbox{
			  width: 100%;
			  background-color: white;
			  box-sizing: border-box;
			  padding: 20rpx;
			  .itemlist{
				  width: 100%;
				  .infobox{
					  display: flex;
					  align-items: center;
					  .imgbox{
						  width: 170rpx;
						  height: 200rpx;
						  border-radius: 10rpx;
						  margin-right: 20rpx;
						  image{
							  width: 100%;
							  height: 100%;
							  border-radius: 10rpx;
						  }
					  }
					  .info{
						flex: 1;
						line-height: 2.5;
						.nameline{
							display: flex;
							align-items: center;
							position: relative;
							.iconfont{
								position: absolute;
								right: 10rpx;
								top: 0;
								color: #00A3FF ;
								display: flex;
								align-items: center;
								view{
									font-size: 24rpx;
									color: black;
								}
								
								
							}
							.name{
								font-weight: bold;
								margin-right: 20rpx;
							}
						}
						.hospitalname{
							font-size: 24rpx;
							padding: 10rpx 30rpx;
							border-radius: 10rpx;
							background-color: #F4F4F4 ;
						}
						.zhichengline{
							display: flex;
							align-items: center;
							.itemzhicheng{
								font-size: 22rpx;
								color: #B16A00 ;
								background-color: #FFF6EB ;
								padding: 10rpx 30rpx;
									border-radius: 10rpx;
							}
							
						}
						
					  }
				  }
				  .tabline{
					  width: 100%;
					  display: flex;
					  margin-top: 20rpx;
					  align-items: center;
					  justify-content: space-evenly;
					  .itemtab{
						  display: flex;
						  align-items: center;
						  color: #898989 ;
						  .iconfont{
							  font-size: 40rpx;
							  color: #1a4f8a ;
							  margin-right: 20rpx;
						  }
					  }
				  }
			  }
			  
		  }
	  }
  }
</style>
